/*menu horizontal con desplegable en ejercicios*/




@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&display=swap');

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
}
.menu-horizontal{
    list-style: none;
    display: flex;
    justify-content: space-between;
}
.menu-horizontal li a{
    display: block;
    color: white;
    text-decoration: none;
}
.menu-vertical{position: absolute;margin: 0;padding: 0%;display: none;list-style: none;width: auto;background-color:rgb(58, 58, 58);}

.menu-vertical li a{display: block;color: white;text-decoration: none;padding: 0.8rem 0.8rem 0.8rem 1.2rem;}

.menu-horizontal li:hover .menu-vertical{display: block;}

.menu-vertical li a:hover{color: white;background-color:rgba(0, 0, 0, .5);}

/*nav{
    background: rgb(88, 175, 146);
    height: 80px;
    width: 80%;
    position:fixed;
}*/
.checkbtn{
    font-size: 30px;
    color: white;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}
#check{
    display: none;
}
/*
section{
    background: url(fondo.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    /*height: calc(100vh - 80px);
}*/




@media (max-width: 65rem){
    .link{
        padding-left: 20px;
    }
    nav ul li a{
        font-size: 16px;
    }

    *{margin: 0;padding: 0%;}

    .checkbtn{
        display: block;
    }

    header{
        padding: 0%;
        display: block;
        display: flex;
        justify-content: space-between;
        background-color: #676b6e;
    }

    header a{
        display: flex;
        align-items:center;
    }

    header a img{
        margin: auto;
        margin-left: 2rem;
    }

    header nav{
        margin: 0;
        padding: 0%;
        width: auto;
        background-color: #676b6e;
        border-radius: 0rem;
        height: 5rem;
    }

    .menu-horizontal{
        position: fixed;
        width:90%;
        height: auto;
        background-color: (88, 175, 146);
        border-radius: 0%;
        top: 80px;
        left: 100%;
        text-align: center;
        transition: all .4s;
    }

    .menu-horizontal li {
        display: block;
        margin:auto;
        line-height: 20px;
        justify-content: center;
    }

    nav ul li a{
        font-size: 15px;
        color: white;
    }

    header nav ul li a:hover{
        transform:none;
        color: white;
        background-color: #676b6e;
    }
    .menu-horizontal > li:hover{
        background-color: #676b6e;
        transition: none;
    }

    #check:checked ~ ul{
        left:0;
    }
}